<template>
  <el-row>
    <el-col :span="18">
      <dv-border-box-11 :title="title">
        <analysis @setTitle="setTitle" />
      </dv-border-box-11>
    </el-col>
    <el-col :span="6">
      <dv-border-box-12 :color="datavColors">
        <top-right1></top-right1>
      </dv-border-box-12>
      <dv-border-box-12 :color="datavColors">
        <top-right2></top-right2>
      </dv-border-box-12>
    </el-col>
  </el-row>
  <el-row>
    <draggable
      class="draggable"
      v-model="actionBar" 
      group="people" 
      @start="drag=true" 
      @end="drag=false" 
      item-key="name">
    <template #item="{element}">
      <el-col class="draggableCol" :span="6">
        <bottom1 v-if="element.name == '知识库统计' && element.selected"></bottom1>
        <bottom2 v-if="element.name == '学生选课' && element.selected"></bottom2>
        <bottom3 v-if="element.name == '学生考勤' && element.selected"></bottom3>
        <bottom4 v-if="element.name == '教师考勤' && element.selected"></bottom4>
      </el-col>
     </template>
  </draggable>
  </el-row>
  <el-row  :class="['actionBar',showActionBar?'show':'hide']" @mouseenter="showActionBar = true" @mouseleave="showActionBar = false">
    <el-col :span="6" v-for="(item,index) in actionBar" :key="index">
      <div class="selectItems">
        <img :src="item.selected?selectedImg:unselectedImg" alt="" @click="selectedChange(item)">
        <span>{{item.name}}</span>
      </div>
    </el-col>
  </el-row>
</template>

<script lang="ts">
import {defineComponent,computed,ref,reactive,toRefs} from 'vue'
import {useStore} from "vuex"
import draggable from 'vuedraggable'
import topRight1 from './topRight1/index.vue'
import topRight2 from './topRight2/index.vue'
import bottom1 from './bottom1/index.vue'
import bottom2 from './bottom2/index.vue'
import bottom3 from './bottom3/index.vue'
import bottom4 from './bottom4/index.vue'
import analysis from './analysis/index.vue'

export default defineComponent({
  components: {
    topRight1,
    topRight2,
    bottom1,
    bottom2,
    bottom3,
    bottom4,
    analysis,
    draggable
  },
  setup() {
    const datavColors = computed(() => useStore().state.datavColors)
    const show = ref(true)
    const drag = ref(false)
    const showActionBar = ref(false)
    const title = ref('成绩分析')

    const data = reactive({
      drag: false,
      actionBar:[
        { selected: true, name: '知识库统计' },
        { selected: true, name: '学生选课' },
        { selected: true, name: '学生考勤' },
        { selected: true, name: '教师考勤' },
      ],
      selectedImg:require('@/assets/selected.png'),
      unselectedImg:require('@/assets/unselected.png'),
      addImg:require('@/assets/add.png')
    })

    const selectedChange = (val:any) => {
      val.selected = !val.selected
    }

    const setTitle = (val:any) => {
      title.value = val
    }

    return { datavColors,show ,showActionBar,drag,setTitle,title,selectedChange,...toRefs(data)}
  }
})
</script>

<style lang="scss" scoped>
@import '@/assets/scss/index.scss';
.dv-border-box-12{
  height: auto;
}
.draggable{
  width: 100%;
  display: flex;
  .draggableCol{
    cursor: move;
  }
}
.actionBar{
  width: 50%;
  height: 60px;
  background-color: rgb(0,0,0,0.8);
  position: absolute;
  left: 50%;
  bottom:0px;
  transform: translateX(-50%);
}
.show{
  opacity: 1;
}
.hide{
  opacity: 0;
}
.selectItems{
  width: 100%;
  height: 60px;
  line-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  img{
    cursor: pointer;
    width: 30px;
    height: 30px;
    margin: 0 16px;
  }
  span{
    font-size:18px
  }
}
</style>
